<template>
  <div class="wrapper d-flex flex-column">
    <section id="app" class="content">
      <!-- 此处为中间内容，通过 js 动态生成 -->
      <div class="w">
        <Carousel />
        <!--  推荐歌单结构开始  -->
        <Recommend />
        <!--  推荐歌单结构结束  -->
      </div>
    </section>
    <router-view> </router-view>
  </div>
</template>

<script>
import axios from "axios";
import Carousel from "./Carousel.vue";
import Recommend from "./Recommend.vue";
import Footer from "../../components/Footer.vue";
export default {
  name: "Home",
  components: { Carousel, Recommend, Footer },
  data() {
    return {
      recommend: "",
      nowhash: "",
      isaudio: this.$store.state.isaudio,
    };
  },
  mounted() {
    this.nowhash = window.location.hash;
    //获取推荐歌单
    axios.get("http://localhost:3000/homepage/block/page").then((response) => {
      //console.log(response.data.data.blocks[1].creatives);
      this.recommend = response.data.data.blocks[1].creatives;
    }),
      this.$store.commit("ISRE", true);
  },
  beforeUpdate() {
    //获取hash值
    this.nowhash = window.location.hash;
    //获去是否播放
    //console.log(this.$store.state.isaudio);
  },
};
</script>

<style>
.wrapper {
  background-color: #eee;
  width: 950px;
  margin: 0 auto;
  position: relative;
}

.wrapper .header {
  /* margin-bottom: 10px; */
  width: 100%;
  font-size: 20px;
  text-align: center;
  background-color: #2bb669;
  color: #fff;
  padding: 15px 0;
}

.wrapper .content {
  width: 100%;
  min-height: 450px;
}

.wrapper .player-control {
  background-color: #f6f6f8;
  height: 65px;
  width: 100%;
}
.wrapper .content {
  width: 100%;
}
.w {
  width: 90%;
  margin: 0 auto;
}

/* 中间页面轮播图结构样式开始 */
.carousel-wrapper {
  width: 100%;
  position: relative;
}

.carousel-container {
  position: relative;
  height: 300px;
  width: 100%;
}

.carousel-control {
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2021;
  background-color: rgba(255, 255, 255, 0.2);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
}
.carousel-control-left {
  left: 10px;
}

.carousel-control-right {
  right: 10px;
}

.carousel-control-hover {
  background-color: rgba(255, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
}

.carousel-container {
  position: relative;
  height: 300px;
  width: 100%;
}

.carousel-item {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow: hidden;
}

.carousel-item > img {
  width: 100%;
  height: auto;
}

.carousel-indicators {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
}

.carousel-indicators > li {
  width: 50px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 15px 2px;
}

.carousel-indicators > .active {
  background-color: rgba(255, 255, 255, 0.9);
}
/* 中间页面轮播图结构样式结束 */

/* 推荐歌单结构样式结束 */
.recommend-playlist {
  width: 100%;
  margin: 10px 0;
}

.recommend-playlist-header {
  font-size: 20px;
  padding: 10px 0;
}

.recommend-playlist-container {
  width: 100%;
}

.recommend-playlist-item {
  width: 18%;
}

.recommend-playlist-cover {
  width: 100%;
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  font-size: 0;
}

.recommend-playlist-cover > img {
  width: 100%;
  height: auto;
  font-size: 0;
}

.recommend-playlist-cover .recommend-playlist-icon {
  opacity: 0;
  position: absolute;
  bottom: 10px;
  right: 5px;
  color: #ccc;
  font-size: 20px;
}

.hover .recommend-playlist-icon {
  opacity: 1;
}

.recommend-playlist-title {
  margin-top: 5px;
  width: 100%;
}
.single-text-omitted {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.multi-text-omitted {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* 推荐歌单结构样式结束 */

/* carousel.js需要的新增样式 */
.carousel-container {
  position: relative;
  height: 300px;
  width: 100%;
  /* 新加的属性，调试过程中可先不加 */
  overflow: hidden;
}

/* 新加的属性 */
.carousel-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.carousel-control {
  width: 25px;
  height: 25px;
  line-height: 25px;
  border-radius: 50%;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2021;
  background-color: rgba(255, 255, 255, 0.2);
  text-align: center;
  color: rgba(255, 255, 255, 0.6);
  /* 新增 */
  cursor: pointer;
}
.carousel-indicators > li {
  width: 50px;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 15px 2px;
  /* 新增 */
  cursor: pointer;
}

.wrapper .content {
  width: 100%;
  /* 新增内容 */
  min-height: 450px;
}

/* 修改样式 */
.recommend-playlist-cover img {
  width: 100%;
  height: auto;
  font-size: 0;
  /* 新增样式 */
  transition: transform 0.2s linear;
}

.recommend-playlist-cover .recommend-playlist-icon {
  opacity: 0;
  position: absolute;
  bottom: 10px;
  right: 5px;
  color: #ccc;
  font-size: 20px;
  /* 新增样式 */
  transition: opacity 0.2s linear;
}

.hover .recommend-playlist-icon {
  opacity: 1;
}

/* 新增样式:图片伸缩 */
.hover .recommend-playlist-cover img {
  transform: scale(1.1);
}
</style>
